<template>
    <div v-if="configFail">配置错误</div>
    <div id="container" v-else>
        <div id="tip" :class="{ come: enlarge }">
            <template v-if="showResult">
                <div>{{ today }}</div>
                <div>花费时间：{{ spend }}秒</div>
                <div>
                    口算结果： 错<span :class="{ red: wrongNum > 0 }">{{ wrongNum }}</span> / 空{{ emptyPush }} / 总{{ limit }}
                </div>
                <div v-if="wrongNum > 0" class="red">
                    <template v-if="!isMobile"> &lt;&lt;&lt;&lt; </template>
                    做错题目
                </div>
            </template>
            <template v-else>
                <span>计时：{{ spend }}秒</span>
            </template>
        </div>

        <div id="list" ref="list" :class="{ leave: enlarge }">
            <ol>
                <template v-if="showResult">
                    <li class="wrong-item" v-for="(item, idx) in wrongItems" v-bind:key="idx">
                        {{ item.content }} <span class="gap">⚆_⚆</span> <span class="red">{{ item.ipt }}</span>
                    </li>
                </template>
                <template v-else>
                    <li class="item" v-for="(item, idx) in items" v-bind:key="idx">
                        <template v-if="item['isSelect']">
                            <div class="select-box">
                                {{ item['title'] }}
                                <el-radio-group class="select-topic" v-model="items[idx]['ipt']">
                                    <div v-for="(radioValue, radioKey) in radioOptions" :key="radioKey">
                                        <el-radio class="select-value" :label="radioValue" @change="pushResult(idx)" border />
                                    </div>
                                </el-radio-group>
                            </div>
                        </template>
                        <template v-else>
                            <el-form-item :label="item['title']">
                                <el-input v-model="items[idx]['ipt']" @focus="changeScroll" @blur="pushResult(idx)" />
                            </el-form-item>
                        </template>
                    </li>
                </template>
            </ol>
        </div>
    </div>
</template>

<script>
import tools from '../utils/tools.js'

// 算式数组
// 数字1    数字2   方法    正确结果    输入结果    结果是否正确

export default {
    data() {
        return {
            limit: 10, //做题数量
            jiaRange: 10, //加法范围
            jianRange: 10, //剑法范围
            chengRange: 9, //乘法范围

            configFail: false, //输入配置是否合法

            timer: null, //计时器
            items: [], //题目
            showResult: false,
            wrongItems: [], //错题
            total: 0, //结果

            spend: 0,

            isMobile: false,
            today: '',
            emptyPush: 0, //空题数量

            enlarge: false, //是否放大显示结果
            spaceCircle: ' 〇 ', //算法填写占位符
            radioOptions: ['+', '-', '=', '＞', '＜']
        }
    },
    created() {
        this.limit = parseInt(this.$route.query.limit)
        this.jiaRange = parseInt(this.$route.query.plus_range)
        this.jianRange = parseInt(this.$route.query.sub_range)
        this.chengRange = parseInt(this.$route.query.multi_range)

        if (this.limit < 1) {
            this.configFail = true
        } else {
            this.initItems()
        }

        this.isMobile = tools.isMobile()
    },

    computed: {
        wrongNum() {
            return this.wrongItems.length
        }
    },

    methods: {
        // 最后一道题则自动提交结果
        pushResult(idx) {
            if (idx == this.items.length - 1) {
                clearInterval(this.timer)
                this.submit()
            }
        },
        // 统计结果
        submit() {
            this.wrongItems = []
            this.showResult = true
            for (let item of this.items) {
                if (item['ipt'] != '') {
                    this.total += 1
                    if (item['isSelect']) {
                        if (item['ipt'] != item['result']) {
                            this.wrongItems.push({ content: item['title'], result: item['result'], ipt: item['ipt'] })
                        }
                    } else {
                        if (parseInt(item['ipt']) != item['result']) {
                            this.wrongItems.push({ content: item['title'], result: item['result'], ipt: item['ipt'] })
                        }
                    }
                } else {
                    this.emptyPush += 1
                }
            }
            this.today = tools.today()
            if (this.wrongItems.length < 1 && !this.isMobile) {
                this.enlarge = true
            }
            tools.saveHistory({ time: this.today, items: this.wrongItems })
        },
        changeScroll(event) {
            if (this.timer == null) {
                // 首次点击输入框则开始计时
                const that = this
                this.timer = setInterval(function () {
                    that.spend += 1
                }, 1000)
            }
            const top = this.offsetTop(event.currentTarget)
            this.$refs.list.scrollTo(0, top - 130)
        },

        offsetTop(elements) {
            var top = elements.offsetTop
            var parent = elements.offsetParent
            while (parent != null) {
                top += parent.offsetTop
                parent = parent.offsetParent
            }
            return top
        },
        getCompareResult(a, b) {
            // ＞   ＜   =
            let result = ''
            if (a > b) {
                result = '＞'
            } else if (a < b) {
                result = '＜'
            } else if (a == b) {
                result = '='
            }
            return result
        },
        initItems() {
            const itemNum = this.limit
            let selectTopic = []
            let currentSelect = {}

            let aNum = 0
            let bNum = 0
            let cNum = 0

            for (let i = 0; i < itemNum; i++) {
                if (this.jiaRange > 0) {
                    aNum = tools.getRandom(this.jiaRange)
                    bNum = tools.getRandom(this.jiaRange - aNum)
                    let jiaMap = {}
                    jiaMap['title'] = aNum + ' + ' + bNum
                    jiaMap['result'] = aNum + bNum
                    jiaMap['ipt'] = ''
                    jiaMap['isRight'] = false
                    jiaMap['isSelect'] = false
                    this.items.push(jiaMap)

                    // 选择题1
                    currentSelect = {}
                    cNum = tools.getRandom(this.jiaRange)
                    currentSelect['title'] = jiaMap['title'] + this.spaceCircle + cNum
                    currentSelect['result'] = this.getCompareResult(jiaMap['result'], cNum)
                    currentSelect['ipt'] = ''
                    currentSelect['isRight'] = false
                    currentSelect['isSelect'] = true
                    selectTopic.push(currentSelect)
                    // 选择题2
                    currentSelect = {}
                    currentSelect['title'] = `${aNum} ${this.spaceCircle} ${bNum} = ` + jiaMap['result']
                    currentSelect['result'] = '+'
                    currentSelect['ipt'] = ''
                    currentSelect['isRight'] = false
                    currentSelect['isSelect'] = true
                    selectTopic.push(currentSelect)
                }
                if (this.jianRange > 0) {
                    aNum = tools.getRandom(this.jianRange)
                    bNum = tools.getRandom(aNum)
                    let jianMap = {}
                    jianMap['title'] = aNum + ' - ' + bNum
                    jianMap['result'] = aNum - bNum
                    jianMap['ipt'] = ''
                    jianMap['isRight'] = false
                    jianMap['isSelect'] = false
                    this.items.push(jianMap)

                    // 选择题1
                    currentSelect = {}
                    cNum = tools.getRandom(this.jianRange)
                    currentSelect['title'] = jianMap['title'] + this.spaceCircle + cNum
                    currentSelect['result'] = this.getCompareResult(jianMap['result'], cNum)
                    currentSelect['ipt'] = ''
                    currentSelect['isRight'] = false
                    currentSelect['isSelect'] = true
                    selectTopic.push(currentSelect)
                    // 选择题2
                    currentSelect = {}
                    currentSelect['title'] = `${aNum} ${this.spaceCircle} ${bNum} = ` + jianMap['result']
                    currentSelect['result'] = '-'
                    currentSelect['ipt'] = ''
                    currentSelect['isRight'] = false
                    currentSelect['isSelect'] = true
                    selectTopic.push(currentSelect)
                }
                if (this.chengRange > 0) {
                    aNum = tools.getRandom(this.chengRange, 2)
                    bNum = tools.getRandom(9, aNum)
                    let chengMap = {}
                    chengMap['title'] = aNum + ' × ' + bNum
                    chengMap['result'] = aNum * bNum
                    chengMap['ipt'] = ''
                    chengMap['isRight'] = false
                    chengMap['isSelect'] = false
                    this.items.push(chengMap)
                }
            }
            // 打乱选择题
            selectTopic = tools.randomArr(selectTopic)

            let pre = this.items.slice(0, parseInt((this.limit * 3) / 5))
            pre = pre.concat(selectTopic)

            this.items = pre.slice(0, this.limit)
        }
    }
}
</script>

<style>
.select-box {
    margin-bottom: 18px;
}

.select-topic {
    display: block;
}

.select-value {
    width: 100%;
    margin-bottom: 5px;
}

.gap {
    margin: 0 30px;
}
</style>
